<template>
  <div>
    <!-- Company Information Display -->
    <div class="company-info">
      <div class="info-row">
        <p><strong>公司名称：</strong>{{ formData.companyName }}</p>
        <p><strong>统一社会信用代码：</strong>{{ formData.creditCode }}</p>
      </div>
      <div class="info-row">
        <p><strong>公司注册地址：</strong>{{ formData.registeredAddress }}</p>
      </div>
      <div class="info-row">
        <p><strong>机构类型：</strong>{{ formData.organizationType }}</p>
        <p><strong>公司性质：</strong>{{ formData.companyNature }}</p>
      </div>
      <div class="info-row">
        <p><strong>成立日期：</strong>{{ formData.establishedDate }}</p>
      </div>
      <div class="info-row">
        <p><strong>法人/负责人：</strong>{{ formData.legalPerson }}</p>
        <p><strong>法人/负责人身份证：</strong>{{ formData.idCard }}</p>
      </div>
    <div class="info-row">
      <p><strong>法人/负责人身份证扫描件：</strong><a>查看图片</a></p>
    </div>
    <div class="info-row">
        <p><strong>单位联系地址：</strong>{{ formData.contactAddress }}</p>
    </div>
      <div class="info-row">
        <p><strong>经营范围：</strong>{{ formData.businessScope }}</p>
        <p><strong>公司简介：</strong>{{ formData.companyIntroduction }}</p>
      </div>
      <div class="info-row">
        <p><strong>营业执照有效期：</strong>{{ formData.businessLicenseValidity }}</p>
      </div>
    <div class="info-row">
      <p><strong>营业执照扫描件：</strong><a>查看图片</a></p>
    </div> 
     <div class="info-row">
        <p><strong>开户行：</strong>{{ formData.bankName }}</p>
        <p><strong>银行账号：</strong>{{ formData.bankAccount }}</p>
      </div>
     <div class="info-row">
        <p><strong>开户行地址：</strong>{{ formData.bankAddress }}</p>
      </div>
      <div class="info-row">
        <p><strong>单位注册电话：</strong>{{ formData.registeredPhone }}</p>
	<p><strong>单位注册地址：</strong>{{ formData.registeredPhone }}</p>
      </div>
      <div class="info-row">
        <p><strong>注册资本（万元）：</strong>{{ formData.registeredCapital }}</p>
        <p><strong>实缴资本：</strong>{{ formData.paidCapital }}</p>
      </div>
      <div class="info-row">
        <p><strong>开户许可证/基本户存款信息证：</strong>{{ formData.accountLicense }}</p>
      </div>
    <div class="info-row">
      <p></p>
      <button @click="openForm">修改</button>
    </div>
    </div>

    <!-- Edit Form Popup -->
    <div v-if="formVisible" class="warning-popup">
      <div class="form-container">
        <h2>修改公司信息</h2>
        <form @submit.prevent="submitForm">
          <div class="info-row">
            <div class="laput">
              <label for="companyName">公司名称：</label>
              <input type="text" id="companyName" v-model="formData.companyName" class="input-field">
            </div>
            <div class="laput">
              <label for="registeredAddress">公司注册地址：</label>
              <input type="text" id="registeredAddress" v-model="formData.registeredAddress" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="organizationType">机构类型：</label>
            <input type="text" id="organizationType" v-model="formData.organizationType" class="input-field">
            </div>
            <div class="laput">
            <label for="companyNature">公司性质：</label>
            <input type="text" id="companyNature" v-model="formData.companyNature" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="establishedDate">成立日期：</label>
            <input type="text" id="establishedDate" v-model="formData.establishedDate" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="legalPerson">法人/负责人：</label>
            <input type="text" id="legalPerson" v-model="formData.legalPerson" class="input-field">
            </div>
            <div class="laput">
              <label for="idCard">法人/负责人身份证：</label>
              <input type="text" id="idCard" v-model="formData.idCard" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
              <label for="contactAddress">单位联系地址：</label>
              <input type="text" id="contactAddress" v-model="formData.contactAddress" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
              <label for="businessScope">经营范围：</label>
              <textarea id="businessScope" v-model="formData.businessScope" class="input-field"></textarea>
            </div>
            <div class="laput">
              <label for="companyIntroduction">公司简介：</label>
              <textarea id="companyIntroduction" v-model="formData.companyIntroduction" class="input-field"></textarea>
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
              <label for="businessLicenseValidity">营业执照有效期：</label>
              <input type="text" id="businessLicenseValidity" v-model="formData.businessLicenseValidity" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="bankName">开户行：</label>
            <input type="text" id="bankName" v-model="formData.bankName" class="input-field">
            </div>
            <div class="laput">
            <label for="bankAccount">银行账号：</label>
            <input type="text" id="bankAccount" v-model="formData.bankAccount" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="bankAddress">开户行地址：</label>
            <input type="text" id="bankAddress" v-model="formData.bankAddress" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="registeredPhone">单位注册电话：</label>
            <input type="text" id="registeredPhone" v-model="formData.registeredPhone" class="input-field">
            </div>
            <div class="laput">
            <label for="registeredPhone">单位注册地址：</label>
            <input type="text" id="registeredPhone" v-model="formData.registeredplace" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="registeredCapital">注册资本（万元）：</label>
            <input type="text" id="registeredCapital" v-model="formData.registeredCapital" class="input-field">
            </div>
            <div class="laput">
            <label for="paidCapital">实缴资本：</label>
            <input type="text" id="paidCapital" v-model="formData.paidCapital" class="input-field">
            </div>
          </div>
          <div class="info-row">
            <div class="laput">
            <label for="accountLicense">开户许可证/基本户存款信息证：</label>
            <input type="text" id="accountLicense" v-model="formData.accountLicense" class="input-field">
            </div>
          </div>

          <div class="button-group">
            <button type="submit">确认</button>
            <button type="button" @click="closeForm">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        companyName: '大连素食有限公司',
        creditCode: '2012000043245689567',
        registeredAddress: '辽宁省大连市金普新区和平路56号',
        organizationType: '企业机构',
        companyNature: '私营企业',
        establishedDate: '2021年-05月13日',
        legalPerson: '李华',
        idCard: '210282198706235543',
        contactAddress: '辽宁省大连市金普新区和平路56号',
        businessScope: '饮食',
        companyIntroduction: '大连素食有限公司是一家致力于研究素食美味的公司',
        businessLicenseValidity: '2021/5/13 -2028/5/13',
        bankName: '大连银行',
        bankAccount: '63299427971907320931709',
        bankAddress: '辽宁省大连市金普新区农贸街65号',
        registeredPhone: '0857-4321',
        registeredplace: '辽宁省大连市金普新区和平路56号',
        registeredCapital: '200.00',
        paidCapital: '100.00',
        accountLicense: '辽宁省大连市金普新区和平路56号'
      },
      formVisible: false
    };
  },
  methods: {
    openForm() {
      this.formVisible = true;
    },
    closeForm() {
      this.formVisible = false;
    },
    submitForm() {
      // Handle form submission logic
      console.log('Form submitted with data:', this.formData);
      // Assuming successful submission, close the form
      this.formVisible = false;
      // Simulate success message or further actions
      alert('信息修改成功！');
    }
  }
};
</script>
<style scoped>
.company-info {
  text-align: left;
  margin-left: 20px;
  width: 90%;
  height: auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.info-row p {
  width: 48%;
  text-align: left;
}

.info-row a {
  color: #17C2AA;
  text-decoration: none;
  cursor: pointer;
}

form {
  text-align: left;
}

.laput{
  width: 48%;
  display:flex;
  flex-direction:row;
  align-items:center;
}

label {
  font-weight: bold;
  white-space: nowrap; /* 阻止文字换行 */
  display: block; /* 确保标签独占一行 */
}

.input-field {
  width: 100%;
  padding: 8px; /* 增加高度 */
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* 确保宽度计算包含内边距和边框 */
}

.button-group {
  margin-top: 10px;
}

button {
  float: right;
  padding: 8px 20px;
  background-color: #21C9A4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.warning-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保弹窗在最顶部 */
}

.form-container {
  background-color: #fff; /* 不透明白色背景 */
  padding: 20px;
  border-radius: 10px;
  width: 100%; /* 可根据需要调整宽度 */
  max-width: 1500px; /* 设置最大宽度 */
  max-height: 80%; /* 设置最大高度 */
  overflow-y: auto; /* 超出内容添加滚动条 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.warning-popup h2 {
  text-align: center;
  margin-bottom: 20px;
  white-space: nowrap; /* 防止文字换行 */
}

.form-group {
  display: flex;
  justify-content: space-between;
}

.form-group .input-container {
  width: 48%;
}
</style>
